<template>
  <div class="backgd">
    <div class="box">
      <span @click="changelogin" :class="logorreg ? 'activeselect' : ''"
        >登录</span
      >
      <span @click="changereg" :class="!logorreg ? 'activeselect' : ''"
        >注册</span
      >
      <!-- 登录 -->
      <div class="logshow" v-show="logorreg">
        <p>学号：<input type="text" v-model="logstunumber" /></p>
        <p>密码：<input type="password" v-model="logpass" /></p>
        <button @click="login">登录</button>
      </div>
      <div class="regshow" v-show="!logorreg">
        <p>姓&nbsp;&nbsp;&nbsp;名：<input type="text" v-model="regname" /></p>
        <p>
          学&nbsp;&nbsp;&nbsp;号：<input type="text" v-model="regstunumber" />
        </p>
        <p>
          密&nbsp;&nbsp;&nbsp;码：<input type="password" v-model="regpass" />
        </p>
        <p>
          班&nbsp;&nbsp;&nbsp;级：<el-select
            v-model="selectclass"
            placeholder=""
            style="width: 175px"
            size="mini"
          >
            <el-option
              v-for="item in classoptions"
              :key="item.id"
              :label="item.class"
              :value="item.class"
            >
            </el-option>
          </el-select>
        </p>
        <button @click="register" class="regbutton">注册</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { v4 as uuidv4 } from "uuid";
export default {
  name: "UserLogin",
  mounted() {
    axios
      .get("http://127.0.0.1/classlist_yang/all")
      .then((res) => {
        // console.log(res.data);
        this.classoptions = res.data;
      })
      .catch((err) => {
        console.log("获取数据失败" + err);
      });
  },
  data() {
    return {
      regname: "",
      logorreg: "true",
      logstunumber: "",
      logpass: "",
      regstunumber: "",
      regpass: "",
      regphone: "",
      regcode: "",
      info: "",
      selectclass: "",
      classoptions: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
    };
  },
  methods: {
    changelogin() {
      this.logorreg = true;
    },
    changereg() {
      this.logorreg = false;
    },
    login() {
      axios
        .get("http://127.0.0.1/memberlist_yang/get", {
          params: {
            number: this.logstunumber,
          },
        })
        .then((res) => {
          // console.log(res.data);
          this.info = res.data;
          console.log(this.info);
          if (
            this.logstunumber == this.info[0].number &&
            this.logpass == this.info[0].password
          ) {
            localStorage.setItem("student",this.info[0].number)
            this.$router.push("/ClubIndex");
          } else {
            alert("学号或密码错误");
          }
        })
        .catch((err) => {
          console.log("获取数据失败" + err);
          alert("学号或密码错误");
        });
    },
    register() {
      axios
        .get("http://127.0.0.1/memberlist_yang/add", {
          params: {
            id: uuidv4(),
            name: this.regname,
            class: this.selectclass,
            password: this.regpass,
            number: this.regstunumber,
            clubL: "",
          },
        })
        .then((res) => {
          console.log(res.data);
          alert("注册成功");
          this.$router.push("/ClubIndex");
        })
        .catch((err) => {
          console.log("获取数据失败" + err);
        });
    },
    getCode(ev) {
      ev.target.disabled = true;
      const code = setInterval(() => {
        this.codetext = "重新获取" + this.i;
        this.i--;
        if (this.i < 0) {
          clearInterval(code);
          ev.target.disabled = false;
          this.i = 59;
          this.codetext = "获取验证码";
        }
      }, 1000);
    },
  },
};
</script>

<style scoped>
.backgd {
  position: relative;
  width: 1320px;
  height: 600px;
  margin: 20px 300px 0 300px;
  /* background-color: #151631; */
}
.box {
  position: absolute;
  top: 50px;
  left: 400px;
  height: 500px;
  width: 500px;
  /* background-color: red; */
  border: 5px solid #158ff9;
}
.box span {
  float: left;
  height: 50px;
  width: 250px;
  line-height: 50px;
  font-size: 24px;
  text-align: center;
}
.activeselect {
  color: white;
  background-color: #158ff9;
}
.logshow {
  position: absolute;
  top: 50px;
  width: 500px;
  height: 450px;
}
.logshow p {
  font-size: 18px;
  height: 50px;
  margin-left: 110px;
  margin-top: 70px;
  line-height: 50px;
}
.logshow p input {
  height: 20px;
}
.logshow button {
  position: absolute;
  top: 300px;
  left: 210px;
  height: 40px;
  width: 80px;
  font-size: 18px;
}
.regshow {
  position: absolute;
  top: 50px;
  width: 500px;
  height: 450px;
}
.regshow p {
  font-size: 18px;
  height: 50px;
  margin-left: 110px;
  margin-top: 10px;
  line-height: 50px;
}
.regshow p input {
  height: 20px;
}
.regshow p button {
  height: 20px;
  width: 80px;
}
.regbutton {
  position: absolute;
  top: 300px;
  left: 210px;
  height: 40px;
  width: 80px;
  font-size: 18px;
}
</style>
